<!--
 * @Author       : LAPTOP-T1PV1M6U\赵祥 18201492987@163.com
 * @Date         : 2024-12-03 09:22:40
 * @LastEditors  : dlw112 1121410814@qq.com
 * @LastEditTime : 2025-03-23 14:50:55
 * @FilePath     : \A-vform\zhlx-autoform-ui\src\components\form-designer\form-widget\field-widget\checkbox-with-input-widget.vue
 * @Description  : 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
-->
<template>
  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
    :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
    :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
    <el-checkbox-group ref="fieldEditor" v-model="fieldModelF" :disabled="field.options.readonly || field.options?.isAllowEditSelectorField == '2'"
      :style="{ 'line-height': field.options.lineHeight + 'px' }" @change="handleChangeEvent" class="checkbox-input-row">
      <span v-for="(item, index) in checkboxInput" :key="index" :style="{ display: field.options.displayStyle }" 
      :class="['checkbox-input-item', { 'with-input': item.showInput && !isReadMode }]">
        <el-checkbox :label="item.value" :disabled="item.disabled || isReadMode" :border="field.options.border">
          {{ item.label }}
        </el-checkbox>
        <!-- 当该选项被选中时显示输入框 -->
        <el-input
          v-if="item.showInput && !isReadMode"
          v-model="item.inputValue"
          :disabled="field.options.disabled"
          :title="item.inputValue"
          :placeholder="field.options.inputPlaceholder || '请输入'"
          :class="['input-field', {
            'append-input': item.inputStyle === 'label-left-align',
            'append-input-center': item.inputStyle === 'label-center-align',
            'append-input-right': item.inputStyle === 'label-right-align'
          }]"
          maxlength="50"
          :style="{ width: item.inputLength ? `${item.inputLength}px` : '0px'}"
          @change="handleInputChange"
        />
        <el-input
          v-if="item.showInput && isReadMode"
          v-model ="item.inputValue"
          :disabled="isReadMode || field.options.disabled"
          :class="['readonly-mode-field', 'input-field', {
            'append-input': item.inputStyle === 'label-left-align',
            'append-input-center': item.inputStyle === 'label-center-align',
            'append-input-right': item.inputStyle === 'label-right-align'
          }]"
          :style="{ width: item.inputLength ? `${item.inputLength}px` : '0px'}"
        />
        <span v-if="item.inputSuffix && item.showInput" class="input-suffix">{{ item.inputSuffix }}</span>
      </span>
    </el-checkbox-group>
  </form-item-wrapper>
</template>

<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from '@/utils/emitter'
import i18n, { translate } from "@/utils/i18n"
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin"

export default {
  name: "checkbox-with-input-widget",
  componentName: 'FieldWidget',
  mixins: [emitter, fieldMixin, i18n],
  components: {
    FormItemWrapper,
  },
  props: {
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false
    },
    subFormRowIndex: Number,
    subFormColIndex: Number,
    subFormRowId: String,
  },
  data() {
    return {
      oldFieldValue: null,
      fieldModel: null,
      rules: [],
    }
  },
  created() {
    this.registerToRefList()
    this.initFieldModel()
    this.initEventHandler()
    this.buildFieldRules()
    this.handleOnCreated()
  },
  computed: {
    checkboxInput() {
      if (this.fieldModel.optionsConfig) {
        return Object.assign(this.field.options.optionItems, this.fieldModel.optionsConfig)
      }
      return this.field.options.optionItems
    },
    fieldModelF:{
      get() {
        if (this.fieldModel.selectedValues) {
          return this.fieldModel.selectedValues
        }
        return this.fieldModel
      },
      set(value) {
        this.fieldModel = value
      }
    }
  },
  mounted() {
    this.handleOnMounted()
  },
  beforeUnmount() {
    this.unregisterFromRefList()
  },
  methods: {
    handleInputChange(value) {
      if (!!this.designState) {
        return
      }

      this.syncUpdateFormModel(this.fieldModel)
    },
  }
}
</script>

<style lang="scss" scoped>
.checkbox-input-row {
  margin-bottom: 8px;
  .checkbox-input-item {
    margin-right: 30px;
    :deep(.el-input.is-disabled .el-input__inner) {
      -webkit-text-fill-color: #606266 !important;
    }
    // 当有输入框时才应用 flex 布局
    &.with-input {
      display: flex !important;
      align-items: center !important;
    }
  }
  .input-field {
    :deep(.el-input__inner) {
      border: none;
      border-bottom: 1px solid #DCDFE6;
      border-radius: 0;
      &:hover {
        border-bottom-color: #C0C4CC;
      }
    }
  }
  .readonly-mode-field {
    padding: 0 !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
    :deep(.el-input__wrapper) {
      background: none !important;
      box-shadow: none !important;
    }
    :deep(.el-input.is-disabled .el-input__inner) {
      -webkit-text-fill-color: #606266 !important;
    }
    &+.input-suffix {
      margin-bottom: 6px;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .append-input {
    :deep(.el-input__inner) {
      text-align: left !important;
    }
  }

  .append-input-center {
    :deep(.el-input__inner) {
      text-align: center !important;
    }
  }

  .append-input-right {
    :deep(.el-input__inner) {
      text-align: right !important;
    }
  }
  .input-suffix {
    display: inline-block;
    vertical-align: middle;
  }
  :deep(.el-input.is-disabled .el-input__inner) {
    -webkit-text-fill-color: #606266 !important;
  }
}
</style>